<template>
    <div class='wrap'>
        <div class="home-main">
          <div id="btn_h" @click='goto'></div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      start: true
    }
  },
  methods: {
    goto () {
      this.$router.push('/rule')
    }
  },
  beforeCreate () {
    this.GLOBAL.validate()
  },
  mounted () {
    this.start = this.GLOBAL.player.startFlag
    document.getElementsByTagName('body')[0].className = 'bgimg'

    // 添加返回事件监听
    /* let that = this
    history.pushState(null, null, '')
    window.onpopstate = function (event) {
      that.$router.push({path: '/'})
    } */
  },
  beforeDestroy () {
    document.body.removeAttribute('class', 'bgimg')
  }
}

</script>

<style>
.bgimg {
  background:url('../assets/home/bg.png') no-repeat;
  background-size:cover;
}
.wrap {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}
.home-main {
  display: flex;
  background:url('../assets/home/bg_1.png') no-repeat;
  background-size:20.5rem;
  min-height: 36rem;
  min-width: 20.5rem;
  flex-direction: column-reverse;
  align-items: center;
}

.home-main #btn_h {
  height: 3.5rem;
  width: 12rem;
  background:url('../assets/home/btn.png') no-repeat;
  background-size:12rem 3.5rem;
  margin-bottom: 5.5rem;
}
</style>
